<template>
<div>
    <input 
        type="text"
        @keydown.enter="onKeyBorad"
        />
</div>

<!-- 事件修饰符 .prevent-->
<div>
    <!-- 不会跳转进入https://www.baidu.com/ 页面 -->
    <a href="https://www.baidu.com/" v-on:click.prevent>阻止默认行为</a>    
</div>
<hr>

<!-- 阻止冒泡事件 .stop-->
<div v-on:click="show('我是父组件')">
    <button v-on:click="show('我是子元素的事件')">事件冒泡</button> <br/>
    <button v-on:click.stop="show('我是子元素的事件')">阻止事件冒泡</button> <br/>
    <a href="https://www.baidu.com/" @click.prevent="show('我是子元素的事件：百度一下')">百度一下</a> <br/>
</div>
<hr>

    <!-- 既阻止冒泡，又阻止默认行为 -->   
    <a href="https://www.baidu.com/" @click.prevent.stop="show('修饰符链式调用')">百度一下@click.prevent.stop</a> <br/>
    <hr>


<!-- 双向绑定指令修饰符 -->
 <!-- v-model = "数据" ，数据实时同步 -->
<div>
    <!-- .trim修饰符: 去除 输入内容 前后的空格-->
    名称
    <input 
        type="text"  
        v-model.trim="goods.name" />  <br/> <br/>

    <!-- .number修饰符：将字符串形式转成数字 -->
    价格
    <input
        type="text"
        v-model.number="goods.price"/>  <br/> <br/>
    
    <!-- .lazy修饰符：失去焦点后同步数据 -->
    生产日期
    <input
        type="text"
        v-model.lazy="goods.data"/>
    

</div> 

</template>

<script setup>
    const onKeyBorad = () =>{
        console.log('onKeyBorad')
    }
    const show = (msg) =>{
        console.log(msg)
    }

    import { reactive } from 'vue'
    const goods = reactive({
        name:'',
        price:'',
        data:''
    })
</script>

<style>

</style>